<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    let data = [
      {
        id: 1,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 2,
        title: "兄弟 - 艾热",
        checked: true,
        collect: false
      }, {
        id: 3,
        title: "毕生 - 夏增祥",
        checked: true,
        collect: true
      }, {
        id: 4,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 5,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];

    let checkAll = document.querySelector("#checkAll")
    let addItem = document.querySelector("#add")
    let newInfo = document.querySelector("#newInfo")
    let removeSelected = document.querySelector("#remove")
    // 数据驱动
    function render(data) {
      let list = document.querySelector("#list");
      //每个是否是true,全选
      const isCheckAll = data.every(item => item.checked === true)
      checkAll.checked = isCheckAll

      list.innerHTML = "";
      // data.forEach(item => {
      //   let li = document.createElement("li");
      //   li.innerHTML = `<input type="checkbox" ${item.checked ? 'checked' : ''} class="check" />
      //   <span>${item.title}</span>
      //   ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
      //   <a href="javascript:;" class="remove">删除</a>`;
      //   list.appendChild(li);
      // })
      list.innerHTML = data.map(item=>{
       return  `<li><input type="checkbox" ${item.checked ? 'checked' : ''} class="check" />
        <span>${item.title}</span>
        ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
        <a href="javascript:;" class="remove">删除</a></li>`
      }).join("")
      addEvent();
    }
    render(data);

    function addEvent() {
      let lis = document.querySelectorAll("#list li");
      // console.log(lis);
      // 数据优先
      lis.forEach((li, key) => {
        li.onclick = function (e) {
          // console.log('click',e.target);
          switch (e.target.className) {
            case 'check':
              // console.log('check',e.target.checked);
              data[key].checked = e.target.checked;
              break;
            case 'collect':
              console.log('collect');
              data[key].collect = true;
              break;
            case 'cancelCollect':
              console.log('cancelCollect');
              data[key].collect = false;
              break;
            case 'remove':
              console.log('remove');
              data.splice(key, 1);
              break;
          }
          // console.log(data);
          render(data);
        }
      })
    }

    // 作业 ：实现全选/全不选  删除指定checked 音乐 添加音乐 （考虑处理数据）
    

    //点击全选/全不选
    checkAll.onclick = function () {
      data.forEach(item=>item.checked = this.checked)
      render(data)
    }
    
    //添加，data数组push
    addItem.onclick = function () {
      let newData = {
        id: data.length + 1,
        title: newInfo.value,
        checked: false,
        collect: false
      }
      data.push(newData)
      render(data)
      newInfo.value = ''
    }
    //删除所选，倒序遍历，从后往前删除
    removeSelected.onclick = function () {
      for (let i = data.length - 1; i >= 0; i--) {
        if (data[i].checked) {
          data.splice(i, 1)
        }
      }
      // let res = data.filter(item=>item.checked === false)
      render(data)
    }

  </script>
</body>

</html>